<template>
  <div>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment(2)">+</button>
    <button @click="asyncDecrement">异步修改数据</button>

    <p>getters 传参：{{ doubleCountN(5) }}</p>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  name: "CouterView",
  computed: {
    ...mapState(["count"]),
    ...mapState(["userStore"]),
    ...mapGetters(["doubleCountN", "doubleCount"]),
  },
  methods: {
    // ...mapMutations({
    //   redd: "decrement", // 将 this.$store.commit("decrement") 映射为当前组件的 this.redd
    // }),
    ...mapMutations([
      "decrement", // 将 this.$store.commit("decrement") 映射为当前组件的 this.decrement
      "increment",
    ]),
    ...mapActions(["asyncDecrement"]),
    add() {
      this.$store.commit("increment", 2);
    },
    red() {
      this.$store.commit("decrement");
    },
  },
  mounted() {
    this.$store.commit("userStore/login", {
      username: "lily",
      userId: "2",
      token: "token",
    });

    console.log("主模块state:", this.$store.state);
    console.log("子模块userStore数据：", this.$store.state.userStore);
    console.log(this.userStore);
  },
};
</script>